<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<style type="text/css">
body {
	background-image: url("images/bg-logon.gif");
	width: 1000px;
	margin: 0 auto;
	padding-top: 55px;
}

.error {
	color: red;
}
</style>
</h:head>
<h:body>

	<fieldset style="width: 370px; border: none;">
		<legend>Logon</legend>
		<h:form>
			<h:panelGrid columns="3" bgcolor="pink">
				<h:outputText value="User name:"></h:outputText>
				<h:inputText id="uN" value="#{userBean.userName}" required="true"
					requiredMessage="Username is required"></h:inputText>
				<h:message styleClass="error" for="uN"></h:message>
				<h:outputText value="Password:"></h:outputText>
				<h:inputSecret id="pS" value="#{userBean.password}" required="true"
					requiredMessage="Password is required"></h:inputSecret>
				<h:message styleClass="error" for="pS"></h:message>
				<h:inputHidden></h:inputHidden>
				<h:commandButton action="#{userBean.logon}" value="Login"></h:commandButton>
			</h:panelGrid>
			<h:outputText styleClass="error" value="#{userBean.message}"></h:outputText>
		</h:form>
	</fieldset>

</h:body>
</html>